<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用标签</title>
    <style>
    div{
        background: palevioletred;
        width: 600px;
        height: 48px;
    }
    a{
        background: palevioletred;
        width: 600px;
        height: 48px;
    }
    img{
        height: 48px;
    }
    form{
        font-size: 0px;
    }
    input{
        width: 200px;
    }
    button{
        width: 50px;
    }
    </style>
</head>
<body>
    <!-- 块级元素 -->
    <!-- 1.独占一整行
    2.可以设置宽高 -->
    <div>div，布局</div>
    <!-- 无序列表 -->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>自定义列表标题</dt>
        <dd>自定义列表1</dd>
        <dd>自定义列表2</dd>
        <dd>自定义列表3</dd>
    </dl>
    <!-- 标题标签h1~h6 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <!-- 段落标签 -->
    <p>百度2022校园招聘简历投递：https://talent.baidu.com/external/baidu/campus.html</p>



    <!-- 行内元素 -->
    <!-- 1.行内元素可以排列在一行
    2.不能设置宽高 -->
    <a href="https://www.baidu.com/">百度</a>
    <span>文字</span>
    <b>加粗</b>
    <i>斜体</i>

    <!-- 行内块级 -->
    <!-- 1.可以跟行内元素排列在一行
    2.可以设置宽高 -->
    <img src="timg1.gif" alt="">

    <!-- 表单 -->
    <form action="">
        <input type="text">
        <button>确认</button>
    </form>
</body>
</html>